{$layout}

<!-- 检测配置更新 -->
<proxy-change-notify-box></proxy-change-notify-box>

{$template "/proxy/menu"}

<div class="second-menu">
	<div class="ui menu text blue tiny">
		<a :href="'/proxy/tunnel?serverId=' + server.id" class="item active">详情</a>
		<a :href="'/proxy/tunnel/update?serverId=' + server.id" class="item">
			<span v-if="tunnel != null">修改</span>
			<span v-if="tunnel == null">启用</span>
		</a>
		<a href="http://teaos.cn/doc/proxy/Tunnel.md" target="_blank" class="item">文档</a>
	</div>
	<div class="ui divider"></div>
</div>

<p class="comment">通过HTTP隧道，可以将一个远端的HTTP/HTTPS请求发送到本地的一个Web服务上<span v-if="tunnel != null">，启用后后端服务器设置、路径规则设置将失效</span>。</p>

<p class="comment" v-if="tunnel == null">暂时还没有启用HTTP隧道，启用后后端服务器设置、路径规则设置将失效，<a :href="'/proxy/tunnel/update?serverId=' + server.id">[启用]</a> 。</p>

<p class="ui message error" v-for="error in errors">
	错误：{{error}}
</p>

<table class="ui table definition selectable" v-if="tunnel != null">
	<tr>
		<td>状态</td>
		<td>
			<span class="ui label green tiny" v-if="isActive">已启动</span>
			<span class="ui label tiny" v-if="!isActive">未启动</span>
			<span v-if="isActive">&nbsp; 当前客户端有{{countConnections}}个连接</span>
		</td>
	</tr>
	<tr>
		<td>是否启用</td>
		<td>
			<span class="ui label green tiny" v-if="tunnel.on">已启用</span>
			<span class="ui label tiny" v-if="!tunnel.on">未启用</span>
		</td>
	</tr>
	<tr>
		<td class="title">服务器终端地址</td>
		<td>{{tunnel.endpoint}}</td>
	</tr>
	<tr>
		<td>客户端私钥</td>
		<td>
			<span v-if="tunnel.secret != null && tunnel.secret.length > 0">{{tunnel.secret}}</span>
			<span v-if="tunnel.secret == null || tunnel.secret.length == 0" class="disabled">没有设置</span>
		</td>
	</tr>
</table>
